<template>
  <div id="app">
    <img src="../assets/images/home/banner.png" alt="" />
    <Title :src="Recommend" title="精品推荐" />
    <Hot :datas="jingpinDatas" />
    <Title :src="Hot" title="热门兑换" />
    <img src="../assets/images/home/ad.png" />
    <Hot :datas="hotDatas" />
    <Title :src="Integral" title="积分攻略"/>
    <Integral />
  </div>
</template>

<script>
import Title from "@/components/home/Title.vue";
import Hot from "@/components/home/Hot.vue";
import Integral from "@/components/home/Integral.vue";
import { hotGetApi,jingPingGetApi } from "@/request/api";
export default {
  data() {
    return {
      Recommend: require("../assets/images/home/Recommend.png"),
      Hot: require("../assets/images/home/hot.png"),
      Integral: require("../assets/images/home/integral.png"),
      hotDatas: [],
      jingpinDatas:[]
    };
  },
  created() {
    hotGetApi().then((res) => {
      this.hotDatas = res.data.data.data.records;
    });
    jingPingGetApi().then((res)=>{
        this.jingpinDatas = res.data.data.data.records;
    })
  },
  components: {
    Title,
    Hot,
    Integral,
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";

img {
  display: block;
  margin: 0 auto;
}

#app {
  background-color: #f5f5f5;
}
</style>